import React, { useState } from "react"
import classNames from 'classnames'
import Transition from '../Transition'

export interface BaseProps {
  title?: string;
  content?: string;
  type?: 'success' | 'default' | 'danger' | 'warning';
  className?: string;
  closable?: boolean;
  afterClose?: () => void;
}

// when defined the type of Alert with React.FC<BaseProps>
// Alert will have some props such as defaultProps
const Alert: React.FC<BaseProps> = (props: BaseProps) => {
  const { title, content, type, className, closable, afterClose } = props
  const classes = classNames('alert', className, {
    [`alert-${type}`]: type,
  })
  const [isShow, setIsShow] = useState<boolean>(true)
  const handleOnClick = () => {
    afterClose && afterClose()
    return setIsShow(false)
  }
  return (
    <Transition
      in={isShow}
      timeout={500}
      animation="zoom-in-top"
    >
      <div className={classes}>
        {closable && <div className="close" onClick={handleOnClick}>X</div>}
        <div className="title">{title}</div>
        <div className="content">{content}</div>
      </div>
    </Transition>
  )
}

Alert.defaultProps = {
  type: 'default',
  closable: true
}

export default Alert